<script setup>
  import {getCategoryFilterAPI} from '@/apis/category'
  import {useRoute} from 'vue-router'
  import {onMounted, ref} from 'vue'
  import {getSubCategoryAPI} from '@/apis/category'
  import GoodsItem from '../Home/components/GoodsItem.vue';

  const cateGoryData = ref({})
  const route = useRoute();

  // 二级页面分类面包屑接口
  const getCateGoryData = async () => {
    const res = await getCategoryFilterAPI(route.params.id)
    console.log(res,'分类二级面包屑');
    cateGoryData.value = res.result
  }
  onMounted(() => {
    getCateGoryData()
  })

  // 二级页面商品  获取基础列表渲染
  const goodList = ref([])
  // 因为接口是POST请求 ，所以要声明一下接收参数,先写成基础列表的渲染 
  const reqData = ref({
    // 接口文档里的要求
    categoryId:route.params.id,
    page:1,
    pageSize:20,
    sortField:'publishTime'
  })
  const getGoodList = async () => {
    const res = await getSubCategoryAPI(reqData.value)
    console.log(res,'二级商品');
    goodList.value = res.result.items
  }
  onMounted(() => {
    getGoodList()
  })

  // tab切换
  const tabchange = () => {
    console.log('tab切换了',reqData.value.sortField);
    // 需要把页数重新定为1 跳转当页后 还是开始的第一页
    reqData.value.page = 1
    // 点击后 我们调用数据接口
    getGoodList()
  }


  // 接下来实现 页面数据拼接无限滚动  直至加载完毕  去elementplus找相应组件Infinite Scroll 无限滚动 
  // v-infinite-scroll="load"  这里需要声明一下 load
  const disabled = ref(false)  //这个是elementplus无限滚动里面的  需要先声明一下 才能使用
  const load = async () => {
    // 看一下到底部有没有实现
    console.log("加载更多数据了");
    // 获取下一页的数据  实现老数据 继续往下加一页
    reqData.value.page ++
    // 从接口 获取新数据
    const res = await getSubCategoryAPI(reqData.value)
    // 然后  要把获取到的新老数据 展开 重新给我们的响应式数据goodList
    // 使用扩展运算符 老数据展开  新数据展开
    goodList.value = [...goodList.value,...res.result.items]
    //加载完毕后结束监听  就算是加一个判断 当页面加载完后 就不无限加载了  这个接口拿到的 数据都在items数组里 所以判断它为空就可以
    if(res.result.items.length === 0) {
      disabled.value = true
    }

  }

</script>

<template>
  <div class="container ">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path:`/category/${cateGoryData.parentId}` }">{{cateGoryData.parentName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{cateGoryData.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="sub-container">
    <!-- 接下来我们进行tab组件切换实现数据筛选 去elementplus看tab相关文档  事件：tab-change	 说明activeName 改变时触发-->
    <!--最外层 v-model	 绑定值，选中选项卡的 activeName   注释：这里绑定的就是接口那边传过来的reqData.sortField -->
      <el-tabs v-model="reqData.sortField" @tab-change="tabchange">
        <!-- 这里的name后面的名字都是 接口那边规定好的 -->
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>
      <!-- 接下来实现 页面数据拼接无限滚动  直至加载完毕  去elementplus找相应组件Infinite Scroll 无限滚动 -->
      <!-- :infinite-scroll-disabled="disabled"这个是停止无限加载 -->
      <div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
         <!-- 商品列表-->
         <!-- 这里还是以前封装的那个GoodsItem 组件 我们进行复用 -->
         <GoodsItem v-for="goodslist in goodList" :key="goodslist.id" :good="goodslist" />
      </div>
    </div> 
  </div>

</template>



<style lang="scss" scoped>
.bread-container {
  padding: 25px 0;
  color: #666;
}

.sub-container {
  padding: 20px 10px;
  background-color: #fff;

  .body {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .goods-item {
    display: block;
    width: 220px;
    margin-right: 20px;
    padding: 20px 30px;
    text-align: center;

    img {
      width: 160px;
      height: 160px;
    }

    p {
      padding-top: 10px;
    }

    .name {
      font-size: 16px;
    }

    .desc {
      color: #999;
      height: 29px;
    }

    .price {
      color: $priceColor;
      font-size: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }


}
</style>